<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SVG测试基本类</title>
    <link rel="stylesheet" href="demo.css"/>
</head>
<body>
<div id="container">

   <!-- <svg width="8cm" height="5cm">
        <title>测试title</title>
        <desc>组元素的应用</desc>

        <g id="group1" style="fill: red">

            <rect x="0.5cm" y="1cm" width="3cm" height="1cm" />
            <rect x="4cm" y="1cm" width="3cm" height="1cm" />
        </g>
        <g id="group2" style="fill: blue">

            <ellipse cx="2cm" cy="4cm" rx="0.8cm" ry="1cm" />
            <ellipse cx="5.5cm" cy="4cm" rx="2cm" ry="1cm" />
        </g>
    </svg>-->

    <!--<svg width="14cm" height="4cm">

        <desc>利用defs元素进行URI引用示例</desc>
        <defs>
            <linearGradient id="Gradient01">

                <stop offset="20%" style="stop-color: darkolivegreen"/>
                <stop offset="90%" style="stop-color: firebrick"/>
            </linearGradient>

        </defs>

        <rect height="10cm" width="1cm" x="1cm" y="1cm" style="fill: url(#Gradient01)"/>
        <ellipse rx="5cm" ry="1cm" cx="6cm" cy="3cm" style="fill: url(#Gradient01)"/>
        <text style="fill: oldlace;font-size: 24pt" x="100" y="120">SVG Hello World!</text>
    </svg>-->

    <!--<svg width="10cm" height="3cm">

        <desc>use 元素使用实例</desc>
        <defs>

            <rect id="MyRect" width="6cm" height="1cm"/>
        </defs>

        <use x="2cm" y="1cm" xlink:href="#MyRect"/>
    </svg>-->

   <!-- <svg width="10cm" height="3cm">

        <desc>use 元素对 symbol 元素的引用</desc>
        <defs>
            <symbol id="MySymbol" viewBox="0 0 20 20">

                <desc>这是定义了4个矩形的symbol</desc>
                <rect height="8" width="8" x="1" y="1"/>
                <rect height="8" width="8" x="11" y="1"/>
                <rect height="8" width="8" x="1" y="11"/>
                <rect height="8" width="8" x="11" y="11"/>
            </symbol>
        </defs>

        <use x="4.5cm" y="1cm" width="1cm" height="1cm" xlink:href="#MySymbol"></use>
    </svg>-->

    <!-- <svg width="100%" height="100%">
        <desc>此图插入外部图像</desc>
        <a xlink:href="http://www.baidu.com">
            <image x="10" y="10" width="1280px" height="855px" xlink:href="test.jpg"></image>
        </a>
    </svg> -->
    

<script type="text/javascript">
         
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 2000 2000");
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("version", "1.1");
svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
svg.setAttribute("xmlns:workflow", "http://www.seeyon.com/");
svg.setAttribute("id", "svg");
         
document.body.appendChild(svg);
         
 var def = document.createElementNS("http://www.w3.org/2000/svg","defs");
 
 
 var p = document.createElementNS("http://www.w3.org/2000/svg","path");
 p.setAttribute("id", "test");
 p.setAttribute("d", "M-272.453-67.376l-0.144,0.173c-4.775,5.728-11.133,8.883-17.903,8.883s-13.128-3.155-17.903-8.883l-0.144-0.173l0.034-0.223c0.922-6.014,4.064-10.845,8.847-13.606l0.34-0.196l0.271,0.284c2.259,2.369,5.297,3.674,8.554,3.674s6.295-1.305,8.554-3.674l0.271-0.284l0.34,0.196c4.783,2.761,7.925,7.592,8.847,13.606L-272.453-67.376z M-290.5-79.859c5.924,0,10.744-4.82,10.744-10.744c0-5.924-4.82-10.744-10.744-10.744s-10.744,4.82-10.744,10.744C-301.244-84.679-296.424-79.859-290.5-79.859z");

 
 var icon = document.createElementNS("http://www.w3.org/2000/svg","image");
 icon.setAttribute("width", 24);
 icon.setAttribute("height", 24);
 icon.setAttributeNS("xlink:href", "");
 icon.setAttribute("id", "testIcon");
 
 def.appendChild(p);
 def.appendChild(icon);
 
 svg.appendChild(def);
         
var r = document.createElementNS("http://www.w3.org/2000/svg","use");
r.setAttribute("x", "600");
r.setAttribute("y", "450");
//r.setAttribute("xlink:href", "#test");
r.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#testIcon");
r.setAttribute("style", "fill:blue"); 
svg.appendChild(r);
</script>
</body>
<script type="text/javascript" src="SVGUtil.js"></script>
<script type="text/javascript" src="demoCommon.js"></script>
</html>